<template>
    <div class="body">
        <topNav></topNav>
        <div class="header">
          <div class="title">Wchime商城</div>
          <div class="search">
            <input class="txt" type="text" v-model="searchInfo"/>
            <input class="btn" type="button" value="搜索" @click="btnClick"/>
          </div>
          <div class="selection">
            <el-select v-model="value" clearable placeholder="请选择" @change="selectChange">
            <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.name"
            
            >
            </el-option>
        </el-select>
          </div>
          
        </div>
        <!-- v-infinite-scroll="getpageDate" -->
      <div class="content" v-infinite-scroll="getpageDate" infinite-scroll-disabled="disabled">

       
        <div>
          <div v-if="tableData.length!=0"  class="module4">
            <div v-for="(item, index) in tableData">
            <goodsBox class="goods" :goodsData="item"></goodsBox>
          </div>
          </div>
          <div v-else style="width: 100%; text-align: center;">
            暂无数据
          </div>
          
        </div>
        

      </div>

      <div class="foot">

      </div>


    </div>
  </template>
  
  <script>
  import topNav from "@/components/topNav/topNav.vue"
  import classifyNav from "@/components/classifyNav/classifyNav.vue"
  import slideShow from "@/components/slideShow/slideShow.vue"
  import rushBuy from "@/components/rushBuy/rushBuy.vue"
  import goodsBox from "@/components/goodsBox/goodsBox.vue"
  import {getHomeGoods, getGoodsType} from "@/api/dataReq"
  export default {
    name: 'Home',
    components: {topNav,classifyNav, slideShow, rushBuy, goodsBox},
    data() {
      return {
        options: [],
        value: '',
        tableData:[],
        currentPage: 1, 
        pageSize: 10, 
        total: 100, 
        totalPage: 10,
        loading: false,
        searchInfo:null,
      }
    },
    computed: {},
    created() {
      this.value = this.$route.query.class
      this.searchInfo = this.$route.query.search
      console.log(this.value, this.searchInfo)
      this.getData()
      this.getTypeList()
    },
    computed: {
    noMore() {
      return this.currentPage >= this.totalPage
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
    methods: {
      getData(){
        var reqData = {
          page_size: this.pageSize,
        page_num: this.currentPage,
      }
      if(this.value){
        reqData['class'] = this.value
      }
      if(this.searchInfo){
        reqData['search'] = this.searchInfo
      }
      var that = this
      getHomeGoods(reqData).then(response => {
        if (response.code == '1') {
          // console.log(response)
          var retData = response.data
          var table = that.tableData
         this.tableData = [...table, ...retData]
         this.total = response.total
         this.totalPage = Math.ceil(this.total / this.pageSize)
         this.loading = false
         
        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
      },
      getTypeList(){
      var reqData  ={all:1}
      getGoodsType(reqData).then(response => {
        if (response.code == '1') {
          // console.log(response)
         this.options = response.data

        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })

    },
      getpageDate(){
        this.loading = true
      setTimeout(() => {
        this.currentPage += 1 // 滚动条到底时，页码自增 1
        // console.log(this.totalPage, this.currentPage)
        if (this.currentPage <= this.totalPage) {
          this.getData() // 调用接口
        }
      }, 500)
      },
      btnClick(){
        this.currentPage=1,
        this.tableData = []
        this.getData()
        
      },
      selectChange(){
        // console.log(11111111111)
        // console.log(this.value)
        this.currentPage=1,
        this.tableData = []
        this.getData()
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .body{
    background: linear-gradient(rgb(191, 227, 241), rgb(213,213,213));
    // height: 600px;
    min-height: 100vh;
    overflow:auto;

  }
  .header{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
    margin-bottom: 40px;
    .title{
      text-align: center;
      font-size: 2rem;
    /* 文字间距 */
    letter-spacing: 5px;
    color: white;
    /* 禁止选中 */
    user-select: none;
    /* 文字阴影 */
    text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
    }
    .search{
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid rgb(131, 199, 225);
      border-radius: 36px;
      background-color: #FFFFFF;
      margin-left: 50px;
      
      .txt{
        width: 500px;
        height: 36px;
        border:none;
        // border-radius:36px 0 0 36px;
        // padding: 10px 20px;
        margin-left: 20px;
        outline: none;
        
      }
      .btn{
        width: 80px;
        height: 39px;
        position: relative;
        border:none;
        border-radius:36px;
        background-color: rgb(131, 199, 225);
        color: #FFFFFF;
        font-size: 16px;
        
      }
    }
  }
  .content{
    width: 1190px;
    // height: 1000px;
    // border: red 1px solid;
    // align-content: center;
    margin: auto;
    // margin-bottom: 60px;
    // padding-bottom: 60px;
    background-color: #FFFFFF;
    border-radius:20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-content: flex-start;
    // display: flex;
    // justify-content: center;
    // align-items: center;

  }
  .foot{
    width: 100%;
    height: 60px;
  }
  .module1{
    width: 100%;
    display: flex;
  }
  .m1Name{
    width: 114px;
    letter-spacing: 5px;
    align-content: flex-start;
    margin-top: 10px;
    span{
      width: 84px;
      margin-left: 20px;
      color: rgb(131, 199, 225);
      font-size: 18px;
      font-weight: 200;
    }
  }
  .classify{
    width: 220px;
    // height: 500px;
    // border: yellow 1px solid;
  }
  .user{
    height: 420px;
    width: 300px;
    // border: yellow 1px solid;
    margin: 0 auto;
    background-color: rgb(243,243,243);
    border-radius:20px;

  }
  .up{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    
  }
  .userheader{
    width: 100px;
    height: 100px;
    background-color: rgb(213,213,213);
    border-radius:100px;
    overflow: hidden;
    margin: 15px 0;
    cursor:pointer;
    img{
      width: 100px;
      height: 100px;
      
    }
  }
  .username{
    cursor:pointer;
  }
  .center{
    img{
      width: 95%;
      height: 100px;
    }
  }
  .gg{
    margin-top: 20px;
    font-size: 0.8rem;
    justify-content:flex-start;
  }
  .botton{
    display: flex;
    
    justify-content: center;
    align-items: center;
    // margin-top: 30px auto;
    margin-top: 30px;
    div{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 0.5rem;
      margin: auto;
      cursor:pointer;
      
      img{
        width: 40px;
      height: 40px;
      }
    }
    div:hover{
                    color: rgb(131, 199, 225);
                }
  }
  .m2Name{
    width: 114px;
    letter-spacing: 5px;
    align-content: flex-start;
    margin-top: 30px;
    span{
      width: 84px;
      margin-left: 20px;
      color: rgb(64,158,255);
      font-size: 18px;
      font-weight: 200;
    }
  }
  .module2{
    display: flex;
    justify-content: flex-start;
      align-items: center;
      flex-wrap:wrap;
      // margin: auto;
      margin-top: 20px;
      margin-bottom: 20px;
      .rushbuy{
        margin: 2px 2.6px;
      }
  }
  .m3Name{
    width: 114px;
    letter-spacing: 5px;
    align-content: flex-start;
    margin-top: 30px;
    
    span{
      width: 84px;
      margin-left: 20px;
      color: rgb(180, 183, 33);
      font-size: 18px;
      font-weight: 200;
    }
  }
  .module3{
    width: 100%;
    display: flex;
    flex: 6;
    align-items: center;
    flex-wrap:wrap;
    margin: auto;
    margin-top: 20px;
    .goods{
      margin: 2px 3px;
    }
      
  }

  .m4Name{
    width: 114px;
    letter-spacing: 5px;
    align-content: flex-start;
    margin-top: 30px;
    span{
      width: 84px;
      margin-left: 20px;
      color: rgb(208, 84, 11);
      font-size: 18px;
      font-weight: 200;
    }
  }
  .module4{
    width: 100%;
    display: flex;
    // flex-direction: row;
    flex: 6;
    align-items: center;
    flex-wrap:wrap;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    .goods{
      margin: 2px 3px;
    }
      
  }

  .selection{
    width: 100px;
    border-radius: 36px;
    margin-left: 20px;
  }
    
</style>